<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8' />
	<title>JS Bin</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<style>
	#tabbox{ width: 300px; 
		height: 300px;
		position: relative;
	}
	.imgbg{
		width: 300px;
		height: 300px; 
		top: 0;
		left: 0;
		position: absolute;
		background: #000;  
		opacity:0;
	}
	.imgbg:hover{ 
		opacity:0.5; 
	}
</style>
</head>
<body>
	<div id="tabbox">
		<img src="../image/body-mid/have-good-love-shop/background-img.jpg"" alt="">
		<div class="imgbg"></div>
	</div>
</body>
</html>